<template>
<div class="hotBox">
<h2 class="hot-title"><img class="title-img" src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="本周热门榜单">本周热门榜单</h2>
<ul class="hotsale-list">
    <li class="hotsale-item hotsale-item-position" v-for="(hotsalelist,index) in hotsalelists" :key="hotsalelist.id">
        <span class="hotsale-item-tag" :class="'hotsale-item-tag'+(index+1)" v-if="index<3">Top.{{index+1}}</span>
        <img class="hotsale-item-img" :src="hotsalelist.imgUrl" :alt="hotsalelist.text">
        <p class="hotsale-item-text">{{hotsalelist.text}}</p>
        <p class="hotsale-item-money"><span class="hotsale-item-moneyColor">￥{{hotsalelist.money}}</span>起</p>
    </li>

</ul>

</div>
    
</template>

<script>
export default {
    name:'HomeHot',
    data(){
        return{

        }
    },
    props:['hotsalelists']
}
</script>


<style lang="stylus" scoped>

 @import '~@/assets/styles/mixins.styl'

    .hotBox
        overflow:hidden
        padding:12px
        background-color:#fff
        margin-top:10px
        .hot-title
            line-height:22px
            font-size:16px
            padding:13px 0
            padding-top:0
            .title-img
                width:15px
                margin-right:5px
                vertical-align: top
        .hotsale-list
            overflow-x: scroll
            white-space: nowrap
            text-align:center
            padding-bottom:10px
            .hotsale-item-position
                position:relative
                .hotsale-item-tag1
                    background: linear-gradient(to right, #ff8432 , #ff2f2e)
                .hotsale-item-tag2
                    background: linear-gradient(to right, #ff9d3e , #ff6e1f)
                .hotsale-item-tag3
                    background: linear-gradient(to right, #ffc41e , #ff9d1e)
                .hotsale-item-tag
                    position:absolute
                    top:-0px
                    left:0
                    display:block
                    width:42px
                    height:20px
                    border-radius:4px
                    line-height:20px
                    color:#fff
            .hotsale-item
                display: inline-block
                white-space: nowrap
                margin-right:10px
                width:100px
                padding-top:5px
                .hotsale-item-img
                    width:100px
                    height:100px
                .hotsale-item-text
                    margin-top:6px
                    margin-bottom:6px
                    ellipsis()
                .hotsale-item-money
                    .hotsale-item-moneyColor
                        color:#ff8300

</style>

